<template>
  <!--支付日志组件-->
  <div class="app-container">
    <div>
      <el-form :inline="true" :model="bill" label-width="100px" @submit.native.prevent>
        <el-form-item label="选择查账日期">
          <el-date-picker
            v-model="bill.billDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="账单类型">
          <el-select v-model="bill.billType">
            <el-option
              v-for="(item,index) in billTypes"
              :key="index"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="downloadBill">下载账单</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="table" :data="PaymentOrderList" border>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <!-- 商户订单编号 -->
      <el-table-column prop="orderNo" label="商户订单编号" align="center" show-overflow-tooltip></el-table-column>
      <!-- 支付系统交易编号 -->
      <el-table-column prop="transactionId" label="支付系统交易编号" align="center" show-overflow-tooltip></el-table-column>
      <!-- 支付类型 -->
      <el-table-column label="支付类型" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_pay_type" :value="scope.row.paymentType"></dict-tag>
        </template>
      </el-table-column>
      <!-- 交易类型 -->
      <el-table-column prop="tradeType" label="交易类型" align="center"></el-table-column>
      <!-- 交易状态 -->
      <el-table-column prop="tradeState" label="交易状态" align="center">
        <template v-slot="scope">
          <dict-tag :options="dict.type.sys_order_status" :value="scope.row.tradeState"></dict-tag>
        </template>
      </el-table-column>
      <!-- 支付金额(元) -->
      <el-table-column prop="payerTotal" label="支付金额(元)" align="center"></el-table-column>
      <!-- 通知参数 -->
      <el-table-column label="通知参数" align="center" show-overflow-tooltip>
        <template v-slot="scope">
          {{scope.row.content}}
          <el-tooltip
            :content="scope.row.content"
            raw-content
            placement="top-start"
          >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {PaymentList} from "@/api/pay/paylist";
import {alipayTradeDownloadBill} from "@/api/pay/alipay";

export default {
  dicts:['sys_pay_type','sys_order_status'],
  data() {
    return {
      PaymentOrderList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      billTypes: [
        { label: '交易订单账单', value: 'trade' },
        { label: '商户资金账单', value: 'signcustomer' },
        { label: '营销活动账单', value: 'merchant_act' },
        { label: '直付通商户交易', value: 'trade_zft_merchant' },
        { label: '直付通商户流水', value: 'zft_acc' },
        { label: '结算到卡明细包', value: 'settlementMerge' },
      ],
      bill:{
        billDate:"",
        billType:""
      }
    }
  },
  methods: {
    getList() {
      PaymentList(this.queryParams).then(res => {
        this.PaymentOrderList = res.rows;
        this.total = res.total;
      })
    },
    downloadBill(){
      alipayTradeDownloadBill(this.bill.billDate,this.bill.billType).then((res) => {
        window.open(res.data, "_blank");
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>

</style>
